<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="编号"> </el-table-column>
    <el-table-column label="序号">
      <template slot-scope="{ $index }">
        {{ $index +1}}
      </template>
    </el-table-column>
    <el-table-column prop="id" label="id"> </el-table-column>
    <el-table-column prop="date" label="日期"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column label="性别">
      <template slot-scope="scope">
        {{ scope.row.gender == 1 ? "男" : "女" }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
        {{ scope.row.id }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          gender: 1,
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          gender: 0,
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          gender: 1,
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          gender: 0,
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    del(id) {
      this.tableData = this.tableData.filter((itme) => {
        return itme.id !== id;
      });
    },
  },
};
</script>
